<div class="row">
	<div class="col-xs-12">
		<div class="box">
			<div class="box-header">
				<h3 class="box-title">配置管理</h3>

				<div class="box-tools">
					<div class="input-group input-group-sm" style="width: 350px;">
						<input type="text" name="table_search" id="searchNameId"
							class="form-control pull-right" placeholder="参数名">

						<div class="input-group-btn">
							<button type="button" class="btn btn-default btn-search">
								<i class="fa fa-search"></i>
							</button>

							<button type="button" class="btn btn-default btn-delete">删除</button>
							<button type="button" class="btn btn-default btn-add">添加</button>
						</div>
					</div>
				</div>
			</div>
			<!-- /.box-header -->
			<div class="box-body table-responsive no-padding">
				<form>
					<table class="table table-hover">
						<thead>
							<tr>
								<th><input type="checkbox" id="checkAll">全选</th>
								<th>参数名</th>
								<th>参数值</th>
								<th>创建日期</th>
								<th>修改日期</th>
								<th>操作</th>
							</tr>
						</thead>
						<tbody id="tbodyId">
						
						</tbody>
					</table>
				</form>
			</div>
			<!-- /.box-body -->
			<div id="pageId" class="box-footer clearfix"></div>
		</div>
		<!-- /.box -->
	</div>
</div>
<script type="text/javascript">
	$(function() {
		//load(url,[data],[callback])第三个参数是回调函数，即load函数执行完再执行的
		$("#pageId").load("doPageUI.do", function() {
			//在pageId这个位置加载doPageUI.do路径对应的页面common/page.html，这个页面就是显示首页，下一
			//页这部分内容，注意是先执行访问doPageUI，page.html,doGetObjects方法，在执行
			doGetObjects();
		})
		//当点击table中thead内部的checkbox时，修改每条记录对应的checkbox状态
		//$("#checkAll").change(doChangeCheckAllState);这种如果checkAll对象不存在会注册失败。虽然我们要给checkAll对应的标签添加change事件，但是这个标签并不是一开始都存在的
		//是通过异步加载出来的，如果一开始没有checkAll这个标签，那么change事件会注册失败。但是如果我们是通过tbody标签（也就是checkAll它的父标签）注册这个change事件时，即使一开始
		//不存在checkAll这个标签，change事件也可以注册成功，因为tbody标签一开始就是存在的（不是通过异步加载出来的）
		//只要容器thead存在，就能加载这个事件,上面的那种写法不好，因为一开始是没有checkAll这个标签的，是通过异步加载过来的。
		$("thead").on("change", "#checkAll", doChangeTBodyCheckBoxState);
		
		
		$("#tbodyId").on("change", "input[name='cItem']",
				doChangeTHeadCheckBoxState).on("click",".btn-update",doLoadEditUI)
				
				
		$(".input-group-btn").on("click", ".btn-search", doQueryObjects).on(
				"click", ".btn-delete", doDeleteObjects).on("click",
				".btn-add", doLoadEditUI)
	});
	function doLoadEditUI() {
		
		var title;
		if($(this).hasClass("btn-add")){
		 title = "添加配置信息";
		}else{
			 title="修改配置信息";
			 //获取当前a标签对应的tr上绑定的数据
			var rowData=$(this).parents("tr").data("rowData")
			//将此数据绑定到模态框上
			$("#myModal").data("rowData",rowData)
		}
		var url = "config/doConfigEditUI.do";
		$("#myModal .modal-body").load(url, function() {//当url页面加载完成后，执行function回调函数，
			$("#myModalLabel").html(title)//该标签的文本内容改成title
			$("#myModal").modal("show");//模态框显示，modal方法是模态框里面的方法
		
		});
	}
	function doDeleteObjects() {

		//获取选中的记录id
		var ids = doGetCheckedIds();
		if (ids == null || ids.length == 0) {
			alert("请先选中");
			return;
		}
		//发送异步请求，执行删除操作(这里用的是ajax的post请求方式，跟get请求写法不太一样)
		var url = "config/doDeleteObjects.do";
		var params = {
			ids : ids.toString()
		}//直接写成{ids:ids}，因为ids是一个数组，这样写的话，服务端会解析不出来，需要转化为串
		$.post(url, params, function(result) {
			if (result.state == 1) {
				alert(result.message);
				//重写查询，刷新页面
				doGetObjects();
			} else {
				alert(result.message);
			}

		})
	}

	function doGetCheckedIds() {
		var array = [];
		$("#tbodyId input[type='checkbox']").each(function() {
			if ($(this).prop("checked")) {
				array.push($(this).val()) //往数组里面放		  
			}
		})

		return array;
	}
	//点击tbody中checkbox时修改thead中checkbox对象的状态
	function doChangeTHeadCheckBoxState() {
		var flag = true;
		$("#tbodyId input[type='checkbox']").each(function() {
			flag &= $(this).prop("checked")
		});
		$("#checkAll").prop("checked", flag)
	}
	//执行thread中checkbok事件的处理操作（全选或取消）
	function doChangeTBodyCheckBoxState() {
		//获取thread对象中的checkbox状态值
		var state = $(this).prop("checked");
		console.log(state);
		//依据thead中checkbox的状态修改tBody中
		//获取tBody标签下的的所有ipput标签，进行遍历
		/* $("#tbodyId input[type='checkbox']").each(function(){
		 $(this).prop("checked",state);
		}) */
		//这是上面的简化形式
		$("#tbodyId input[type='checkbox']").prop("checked", state);
	}
	function doQueryObjects() {
		//初始化页码值为1
		$("#pageId").data("pageCurrent", 1);
		//jQuery对象的data方法，可以写两个参数k-v，也可以写1个参数（写k）。
		//1个参数是取值，两个参数是修改值。这里就表示把pageCurrent重新设置值为1
		//执行查询操作（与点击配置管理菜单时触发的
		doGetObjects();
	}

	function doGetObjects() {
		//1、定义参数
		var pageCurrent = $("#pageId").data("pageCurrent");
		//console.log(pageCurrent+"qqq");
		if (!pageCurrent)
			pageCurrent = 1
		var param = {
			pageCurrent : pageCurrent
		};//{pageCurrent:1,name:'A'}

		var name = $("#searchNameId").val().trim();
		if (name)
			param.name = name;//这里也可以写成param[name]=name
		//2定义url
		var url = "config/doFindPageObjects.do";
		//3发送异步请求获取服务端的数据并输出
		$.ajax({//这个函数会把json串转换为json对象
			url : url,//左侧的可以加双引号，也可以不加
			data : param,
			//dataType:"json",//希望服务器端返回值类型，可以写text，json，默认是json
			// contentType:"text/html",客户端向服务器端传递是数据是什么，
			success : function(result) {
				/*这里的result已经是json对象了,里面封装了返回的数据，result的类型是object
				因为业务层返回的是return Jsonresult，这个对象里面封装的的是Jsonresult的各种属性
				信息，返回给给客户的的时候是以json串的形式所以客户端得到的也是这些信息，所以result里面也是
				这些信息，然后我们要用result里面的信息
				 */
				//console.log(result);
				doHandleResponse(result);

				//console.log(result);
			}
		});
	}

	function doHandleResponse(result) {
		if (result.state == 1) {
			//设置表格tBody中的内容
			doSetTableBodyRows(result.data.records);
			//这里的records是一个数组，因为记录是多条的，json形式如：[{},{}]
			//设置分页div中的内容
			doSetPagination(result.data);
		} else {
			alert(result.message);
		}
	}
	//设置当前页列表数据
	function doSetTableBodyRows(records) {
		//获取tBody对象，并且清空数据
		var tBody = $("#tbodyId");
		tBody.empty();
		//迭代records数据并追加到tBody
		for ( var i in records) {
			//创建tr对象
			var tr = $("<tr></tr>")
			tr.data("rowData",records[i]);//修改时可以直接获取tr对象上面的数据，通过此数据初始化页面
			//创建多个td对象
			var td = createTds(records[i]);
			//将td对象追加到tr对象
			tr.append(td);
			//将tr对象追加到tBody中
			tBody.append(tr);
		}
	}
	function createTds(rows) {
		var tds = "<td><input type='checkbox' name='cItem' value='"+rows.id+"'></td>"
				+ "<td>"
				+ rows.name
				+ "</td><td>"
				+ rows.value
				+ "</td><td>"
				+ new Date(rows.createdTime).toLocaleDateString()
				+ "</td><td>"
				+ new Date(rows.modifiedTime).toLocaleDateString()
				+ "</td><td>" + "<a class='btn-update'>修改</a></td>";
		return tds;
	}

	/*
	function createTds(row){
		var tds="<td>"+row.id+"</td>"+"<td>"+row.name+"</td><td>"+row.value+"</td>";
		return tds;
	} */

	<!--
//-->
</script>











